<#--<#include "./common/macro.ftl" />-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>${misName!''}-登录</title>
    <!-- Le styles -->
    <link href="/common/js/bootstrap-3.0.0/css/bootstrap-united.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/common/js/jquery-plugin/validate/style.css" type="text/css">
    <script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/common/js/jquery-plugin/validate/jquery.validate.min.js"></script>

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            /*font-size: 12px;*/
            color: #333;
            /*font-family: Verdana;*/
            background: #fbfbfb;
        }

        #main {
            width: 600px;
            margin: auto;
        }

        #wrapc {
            height: 380px;
            margin-top: 100px;
            border: #c9dff5 1px solid;
            background: #edf4fa;
            border-radius: 5px;
        }

        #logo {
            font-size: 45px;
            height: 70px;
            /*width: 433px;*/
        }

        .logo {
            padding: 5px 75px;
        }
    </style>

    <script type="text/javascript">
        if (window.top.location.href != window.location.href) {
            window.top.location.replace(window.location.href);
        }

        function reCaptcha() {
            var rdm = Math.random();
            $("#changeCheckCode").attr("src", "/checkCode.json?rdm=" + rdm);
        }

        $(function () {
            $("#form").validate({
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    checkCode: {
                        rangelength: [4, 4],
                        required: true,
                        remote: {
                            url: "/checkCodeVerify.json",
                            type: "get",
                            data: {
                                checkCode: function () {
                                    return encodeURI($("#checkCode").val().trim());
                                }
                            }
                        }
                    }
                },
                messages: {
                    username: {
                        required: "请输入用户名"
                    },
                    password: {
                        required: "请输入密码"
                    },
                    checkCode: {
                        rangelength: "",
                        required: "",
                        remote: "验证码错误"
                    }
                },
                errorPlacement: function (error, element) { //指定错误信息位置
//                    error.insertAfter(element);
//                    $(element).closest("div").addClass("has-error");
                },
                highlight: function (element) {
                    $(element).closest("div").removeClass("has-success");
                    $(element).closest("div").addClass("has-error");
                },
                unhighlight: function (element, errorClass) { // element通过验证时触发
                    $(element).closest("div").removeClass("has-error");
                    $(element).closest("div").addClass("has-success");
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
        });
    </script>
</head>
<body>
<div id="main">
    <div id="wrapc">
        <div class="logo">
            <div id="logo" align="center">
            ${misName!''}
            </div>
        </div>

        <div class="login" style="margin-top: 5px;">
            <form id="form" method="post" action="/login" class="form-horizontal">
                <input type="hidden" name="FORMHASH" value='4d409f33d559e1c9'/>

                <div class="form-group">
                    <label class="col-lg-offset-2 col-sm-offset-2 col-xs-2 col-sm-2 control-label"
                           for="username">用户名</label>

                    <div class="col-xs-4 col-sm-4">
                        <input type="text" class="form-control" id="username" name="username">
                        <span style="font-size:13px;font-weight:bold;color:#CC0000"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-offset-2 col-sm-offset-2 col-xs-2 col-sm-2 control-label"
                           for="password">密码</label>

                    <div class="col-xs-4 col-sm-4">
                        <input type="password" class="form-control has-error" id="password" name="password">
                    </div>
                </div>

                <#--<div class="form-group">-->
                    <#--<label class="col-lg-offset-2 col-sm-offset-2 col-xs-2 col-sm-2 control-label"-->
                           <#--for="userType">用户类型</label>-->

                    <#--<div class="col-xs-2 col-sm-2">-->
                        <#--<div class="radio">-->
                            <#--<label>-->
                                <#--<input type="radio" name="userType" value="1">-->
                                <#--LDAP-->
                            <#--</label>-->
                        <#--</div>-->
                    <#--</div>-->

                    <#--<div class="col-xs-3 col-sm-3">-->
                        <#--<div class="radio">-->
                            <#--<label>-->
                                <#--<input type="radio" name="userType" value="2" checked>-->
                                <#--标准用户-->
                            <#--</label>-->
                        <#--</div>-->
                    <#--</div>-->
                <#--</div>-->

                <div class="form-group">
                    <label class="col-lg-offset-2 col-sm-offset-2 col-xs-2 col-sm-2 control-label"
                           for="checkCode">验证码</label>

                    <div class="col-xs-2 col-sm-2">
                        <input type="text" class="form-control" id="checkCode" name="checkCode" maxlength="4">
                    </div>

                    <div class="col-xs-6 col-sm-6">
                        <img src="/checkCode" id="changeCheckCode" onclick="reCaptcha()" height="35" size="10"/>
                        <a href="#" onclick="reCaptcha()">看不清楚,请点我</a>
                    </div>
                </div>

            <#if errorKey?exists>
                <div class="form-group">
                    <div class="col-lg-offset-4 col-sm-offset-4 col-xs-4 col-sm-4">
                        <span style="font-size:13px;font-weight:bold;color:#CC0000">${errorKey?default("")}</span>
                    </div>
                </div>
            </#if>

                <div class="form-group">
                    <div class="col-lg-offset-4 col-sm-offset-4 col-xs-4 col-sm-4">
                        <button style="width: 100%;" type="submit" class="btn btn-primary">登陆</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div align="center" style="margin-top: 20px;">
<#include "footer.ftl"/>
</div>
</body>
</html>